import React, { useRef } from 'react';
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Col, Row, Statistic  } from 'antd';
import LineChart from '@/pages/Home/components/LineChart';
import BarChart from '@/pages/Home/components/BarChart';
import PieChart from '@/pages/Home/components/PieChart';
import TreeMapChart from '@/pages/Home/components/TreeMapChart';
import WordCloudChart from '@/pages/Home/components/WordCloudChart';
import RadialBarChart from '@/pages/Home/components/RadialBarChart';

export default () => {

  return (
    <>
      <Row gutter={[16, 16]}>
        <Col span={8}>
          <Card bordered={false}>
            <Statistic
              title="总考核费用"
              value={11.28}
              precision={2}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
              suffix="%"
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card bordered={false}>
            <Statistic
              title="净收入费用"
              value={9.3}
              precision={2}
              valueStyle={{ color: '#cf1322' }}
              prefix={<ArrowDownOutlined />}
              suffix="%"
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card bordered={false}>
            <Statistic
              title="指标费用占比"
              value={66.3}
              precision={2}
              valueStyle={{ color: '#cf1322' }}
              prefix={<ArrowDownOutlined />}
              suffix="%"
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card bordered={false}>
            <LineChart />
          </Card>
        </Col>
        <Col span={8}>
          <Card bordered={false}>
            <BarChart />
          </Card>
        </Col>
        <Col span={8}>
          <Card bordered={false}>
            <PieChart />
          </Card>
        </Col>
        <Col span={8}>
          <Card bordered={false}>
            <TreeMapChart />
          </Card>
        </Col>
        <Col span={8}>
          <Card bordered={false}>
            <WordCloudChart />
          </Card>
        </Col>
        <Col span={8}>
          <Card bordered={false}>
            <RadialBarChart />
          </Card>
        </Col>
      </Row>
    </>
  )
}
